<%@ page contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/views/wx/include/head.jsp" %>
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.indexedlist.css">
<link rel="stylesheet" href="${ctxStatic }/modules/wx/css/multiPage.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.picker.min.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.poppicker.css">
</head>
<body class="mui-fullscreen">
	<!--页面主结构开始-->
	<div id="app" class="mui-views">
		<div class="mui-view">
			<div class="mui-navbar">
			</div>
			<div class="mui-pages">
			</div>
		</div>
	</div>
	<div id="query" class="mui-page">
		<header class="mui-navbar-inner mui-bar mui-bar-nav">
			<a href="${ctxWx}/pu/index" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">定制包车</h1>
		</header>
		<div class="mui-page-content mui-scroll-wrapper">
		<div class="mui-scroll">
			<form id="inputForm" action="${ctxWx}/pu/demands/form" method=post>
				<input type="hidden" id="cityRecord"/>
				<input type="hidden" id="spottypes"/>
				<div class="mui-input-group">
					<div class="mui-input-row">
						<label>出发地<span class="required-red">*</span></label>
						<input class="departCode" name="departcity.siteid" type="hidden" ${empty tDemands.departcity.siteid?'data-autocity="yes"':'' } value="${tDemands.departcity.siteid }">
						<input class="departName opt-city-choose" data-type="0,2" name="departcity.sitename" type="text"
							${empty tDemands.departcity.sitename?'data-autocity-name="yes"':'' }
							value="${tDemands.departcity.sitename }" placeholder="点击选择出发地" readonly/>
					</div>
					<div class="mui-input-row destcityHide">
						<label>目的地<span class="required-red">*</span></label>
						<input class="destCode" name="destcity.siteid" type="hidden" value="${tDemands.destcity.siteid }">
						<input class="destName opt-city-choose" name="destcity.sitename" type="text" data-type="0,2"
							value="${tDemands.destcity.sitename }" placeholder="点击选择目的地" readonly/>
					</div>
					<div class="mui-input-row" style="height:100px;">
						<label class="control-label" for="modeldesc">行程描述</label>
						<textarea rows="3" name="modeldesc" placeholder="填写行程描述">${tDemands.modeldesc}</textarea>
					</div>
					<div class="mui-input-row">
						<label class="control-label" for="modeldesc">选择车型<span class="required-red">*</span></label>
						<select name="cartype.cargotypeid">
							<c:forEach items="${cargotypeList }" var="cargotype">
								<option value="${cargotype.cargotypeid }" ${tDemands.cartype.cargotypeid==cargotype.cargotypeid?'checked':'' }>${cargotype.typename }</option>
							</c:forEach>
						</select>
					</div>
					<div class="mui-input-row">
						<label class="control-label" for="modeldesc">包车数量<span class="required-red">*</span></label>
						<div class="mui-numbox" data-numbox-min='1' data-numbox-max='10'>
							<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
							<input class="mui-input-numbox" name="vehiclenum" type="number" value="${tDemands.vehiclenum }"/>
							<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
						</div>
					</div>
					<div class="mui-input-row">
						<label>出发日期<span class="required-red">*</span></label>
						<input id="fromdateStr" name="fromdateStr" type="text" value="${tDemands.fromdateStr }" readonly>
					</div>
					<div class="mui-input-row">
						<label>出发时间<span class="required-red">*</span></label>
						<input id="time" name="time" type="text" value="${tDemands.time }" readonly>
					</div>
					<div class="mui-input-row">
						<label>包车天数<span class="required-red">*</span></label>
						<div class="mui-numbox" data-numbox-min='1' data-numbox-max='10'>
							<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
							<input class="mui-input-numbox" name="rentdays" type="number" value="${tDemands.rentdays }"/>
							<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
						</div>
					</div>
					<div class="mui-input-row">
						<label>联系人<span class="required-red">*</span></label>
						<input id="contactor" name="contactor" type="text" value="${tDemands.contactor}" placeholder="填写联系人名称">
					</div>
					<div class="mui-input-row">
						<label>联系电话<span class="required-red">*</span></label>
						<input id="contactphone" name="contactphone" type="text" value="${not empty tDemands.contactphone?tDemands.contactphone:sessionScope.pubuserPermission.mobile}" placeholder="填写联系电话">
					</div>
					<div class="mui-input-row" style="height:100px;">
						<label class="control-label" for="remarks">备注</label>
						<textarea rows="3" name="remarks" maxlength="200" placeholder="填写备注信息">${tDemands.remarks}</textarea>
					</div>
				</div>
				<div class="mui-content-padded">
					<button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="check();">提交</button>
				</div>
			</form>
		</div>
		</div>
	</div>
	<!-- 站点选择页 -->
	<div id="city" class="mui-page">
		<header class="city-bar mui-navbar-inner mui-bar mui-bar-nav">
			<a id="close" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-center mui-title">选择站点</h1>
		</header>
		<div class="mui-page-content">
			<div id="list" class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input id="search" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索站点">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> <a>I</a> <a>J</a> <a>K</a> <a>L</a> <a>M</a> <a>N</a> <a>O</a> <a>P</a> <a>Q</a> <a>R</a> <a>S</a> <a>T</a> <a>U</a> <a>V</a> <a>W</a> <a>X</a> <a>Y</a> <a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul id="indexListContent" class="mui-table-view"></ul>
				</div>
				
			</div>
		</div>
	</div>
	<c:set var="include_location" value="yes"/>
	<%@ include file="/WEB-INF/views/wx/include/script.jsp"%>
	<script src="${ctxStatic }/mui/js/mui.view.js"></script>
	<script src="${ctxStatic }/mui/js/mui.indexedlist.js"></script>
	<script src="${ctxStatic }/mui/js/mui.picker.js"></script>
	<script src="${ctxStatic }/mui/js/mui.dtpicker.js"></script>
	<script src="${ctxStatic }/mui/js/mui.poppicker.js"></script>
	<script>
		var indexed_list_first = true; // 索引列表是否已经初始化
		
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#query'
		});
		
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			view.addEventListener('pageShow', function(e) {
				if(e.detail.page.id == 'city') {
					// 站点数据
					document.getElementById('search').focus();
					getSiteData();
					if(indexed_list_first) { // 仅执行一次
						// 初始化站点数据
						var header = document.querySelector('header.mui-bar');
						var list = document.getElementById('list');
						list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
						window.indexedList = new mui.IndexedList(list);
						indexed_list_first = false;
					}
				}
			});
		})(mui);
		
		var cityHtml = ''; // 城市和景点数据
		$(function(){
			$('.mui-indexed-list-inner').on('tap', 'li.mui-indexed-list-item', function(event) {
				giveCityData($(this));
			});
			
			// 发车日期选择器
			$('#fromdateStr').click(function(){
				var picker = new mui.DtPicker({
						"value":"${tDemands.fromdateStr }",
						"type":"date"
					});
				picker.show(function(rs) {
					$('#fromdateStr').val(rs.text);
					picker.dispose();
				});
			});
			
			// 发车时间选择器
			$('#time').click(function(){
				var picker = new mui.DtPicker({
						"value":"${tDemands.time }",
						"type":"time"
					});
				picker.show(function(rs) {
					$('#time').val(rs.text);
					picker.dispose();
				});
			});
			
			// 选择城市
			$('.opt-city-choose').on('tap',function(){
				if($(this).hasClass('departName')) {
					$('#cityRecord').val('depart');
				}
				if($(this).hasClass('destName')) {
					$('#cityRecord').val('dest');
				}
				$('#spottypes').val($(this).attr('data-type'));
				viewApi.go('#city');
			});
		});
		
		// 提交查询表单
		function check() {
			var boardaddrName = $('input[name="departcity.sitename"]').val();
			var offaddrName = $('input[name="destcity.sitename"]').val();
			if(boardaddrName == ''){
				mui.alert('请选择出发地');
				return;
			} 
			if(offaddrName == ''){
				mui.alert('请选择目的地');
				return;
			}
			if($('#fromdateStr').val()==''){
				mui.alert('请选择出发日期');
				return;
			}
			if($('#time').val()==''){
				mui.alert('请选择出发时间');
				return;
			}
			if($('#contactor').val()==''){
				mui.alert('请填写联系人');
				return;
			}
			if($('#contactphone').val()==''){
				mui.alert('请填写联系电话');
				return;
			}
			$('#inputForm').submit();
		}
		
		// 获取站点数据
		function getSiteData() {
			if(cityHtml == ''){
				var spottypes = $('#spottypes').val();
				$('#indexListContent').html('<li style="text-align:center;margin:20px;font-size:12px;">加载中...</li>');
				$.post('${ctxWx}/data/site/siteJson',{spottypes:spottypes}, function(data) {
					for(var i=0; i<data.length; i++) {
						var item = data[i];
						cityHtml += '<li data-group="'+item.character+'" class="mui-table-view-divider mui-indexed-list-group">'+item.character+'</li>';
						for(var j=0; j<item.list.length; j++) {
							var site = item.list[j];
							cityHtml += '<li data-value="'+site.siteid+'" data-name="'+site.sitename+'" data-tags="'+site.querycode +'" class="mui-table-view-cell mui-indexed-list-item">';
							cityHtml += site.sitename;
							cityHtml += '</li>';
						}
					}
					$('#indexListContent').html(cityHtml);
					var header = document.querySelector('.city-bar');
					var list = document.getElementById('list');
					list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
					new mui.IndexedList(list).search('');
				});
			} else {
				$('#indexListContent').html(cityHtml);
				var header = document.querySelector('.city-bar');
				var list = document.getElementById('list');
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				new mui.IndexedList(list).search('');
			}
		}
		
		// 站点输入框赋值
		function giveCityData(item) {
			var cityRecord = $('#cityRecord');
			if(cityRecord.val() == 'depart') {
				$('.departCode').val(item.attr('data-value'));
				$('.departName').val(item.attr('data-name'));
			} else if(cityRecord.val() == 'dest') {
				$('.destCode').val(item.attr('data-value'));
				$('.destName').val(item.attr('data-name'));
			} else {
				mui.alert('该操作不能正确执行！');
			}
			viewApi.go('#query');
		}
		
	</script>
</body>
</html>